import React,{Component} from "react";
import { Button, Row, Col } from 'antd';
import 'antd/dist/antd.css'
import './swiperbox.css'

export default class SwiperBox extends Component {
    state = {
        showIndex: 2
    };
    
    onClickLeft = () => {
        console.log("left")
        this.setState({
            showIndex: 1
        });
    }

    onClickMiddle = () => {
        console.log("middle")
        this.setState({
            showIndex: 2
        });
    }

    onClickRight = () => {
        console.log("right")
        this.setState({
            showIndex: 3
        });
    }

    render() {
        return (
            <div>
                <div>
                <Button type="primary" onClick={this.onClickLeft}>左侧</Button>
                <Button type="primary" onClick={this.onClickMiddle}>中间</Button>
                <Button type="primary" onClick={this.onClickRight}>中间</Button>
                </div>
                <div className='mbox'>
                    <div className={["bbox"+this.state.showIndex]}>
                        <img className="iimg" src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png" alt="1" />
                        <img className="iimg" src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png" alt="1" />
                        <img className="iimg" src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png" alt="1" />
                    </div>
                </div>

            </div>
        )
    }
}